<template>
   <div class="organization">
            <div class="left_tree">
              <div class="Cleft_header">
                <h2 class="Ctitle">组织架构管理</h2>
                <el-button class="defined_but" type="info" plain icon="el-icon-circle-plus-outline" size="mini" :disabled="isDisabled" @click="add_dept"></el-button>
                <el-button class="defined_but" type="info" plain icon="el-icon-edit" size="mini" :disabled="isDisabled" @click="update_dept"></el-button>
                <el-button class="defined_but" type="info" plain icon="el-icon-delete" size="mini" @click="del_dept" :disabled="isDisabled"></el-button>
              </div>
                <zt-ztree class="organization_tree" :nodeChange="nodeChange" :config="ztreeConfig" :beforeExpand="beforeExpand" :async="async"></zt-ztree>
            </div>
                <div class="around_right_box">
                    <div class="">
                        <el-table
                            :height="windowHeight"
                            ref="multipleTable"
                            :data="departList"
                            tooltip-effect="dark"
                            style="width: 100%"
                            header-row-class-name="organization_table_header"
                            stripe
                            border
                            highlight-current-row
                            @selection-change="handleSelectionChange">
                            <el-table-column
                            type="selection"
                            width="55">
                            </el-table-column>
                            <el-table-column prop="userId" label="工号" width="100"></el-table-column>
                            <el-table-column prop="userId" label="账户ID" width="150"></el-table-column>
                            <el-table-column prop="userName" label="名称" width="260"></el-table-column>
                            <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                            <el-table-column prop="mobile" label="电话" width="150"></el-table-column>
                            <el-table-column prop=" " label="角色" width="200"></el-table-column>
                            <el-table-column prop="cityName" label="籍贯" width="100"></el-table-column>
                            <el-table-column prop="entryDate" label="入职时间" ></el-table-column>
                            <el-table-column prop="disenable" :formatter="isStart" label="状态" width="200" ></el-table-column>
                        </el-table>
                    </div>
                </div>
      
        <addDept-dialog
        :dialogType="dialogType"
        v-if="dialogVisible"
        :dialogVisible.sync="dialogVisible"
        :companyid="companyid"
        :deptparentid="deptparentid"
        :updateDeptInfo="updateDeptInfo"
        :addDept_submit="addDept_submit"
        ></addDept-dialog>
    </div>
</template>

<script>
import ztZtree from '@/components/z-tree/z-tree.vue'
import {DEVPATH} from '@/common/js/constant'
import addDeptDialog from './components/addDept_dialog.vue'
import {mapGetters,mapActions} from 'vuex'
export default {
	components:{
		ztZtree,
    addDeptDialog
	},
    data(){
      return {
          windowHeight: window.innerHeight -50,
        //   ztree的配置文件
          ztreeConfig:{
              id : 'id',
              pid:"deptparentid",
              name:'deptname',
              idIcon:"",
              pidIcon:"",
              companyIcon:"icon-open",
              deptIcon:"icon-bumen1",
              personIcon:"icon-zhiyuanguanlianxiaoshoudingdankehu",
              isCompany:true
          },
          async: {
				        enable: true,
				        url:DEVPATH+"/dept/getDeptCompanyId",
                autoParam:["id","status","companyid"],
                contentType:"application/json",
				        otherParam:{companyid:this.$store.getters.companyId},
				        type: "post",
                headers:{
                  's_company_token':this.$store.getters.s_company_token
                }
             },
        labelPosition: 'right',
        statusItem:{0 : '启用',1:'禁用'},
        departList:[],
        multipleSelection: [],
        dialogVisible:false,
        companyid:'',
        deptparentid:'',
        isDisabled:true,
        testcompanyid:this.$store.getters.companyId,
        updateDeptInfo:'',
        dialogType:'',
        selectNode:{}
      }
	},
	methods:{
        addDept_submit(val){
          this.$post("/dept/savaDept",val,data => {
            this.$message({
               message: '添加部门成功了',
               type: 'success'
             });
             this.dialogVisible=false;
            },error => {
              this.$message.error(error);
          });
        },
        isStart(row, column){
          return (row.disenable)? "启用":"禁用";
        },
		    nodeChange(node){
            this.selectNode = node;
            this.isDisabled = false;
            // 传给添加部门弹窗需要的参数
            console.log("接单内容：",node);
            this.companyid = node.companyid;
            this.deptparentid = node.id;
            // 获取用户列表需要的参数
            let params ={
              companyid:node.companyid,
              id:node.id
            }
            this.getList(params);
        },
        beforeExpand(node){

        },
        addItem(type){
            console.log(type);
        },
        batchItem(type){
            console.log(type);
        },
        search(){

        },
        getList(params){
            this.$post("/dept/getDeptList",params,data => {
                this.departList = data;
                console.log(data);
            },error => {

            });
        },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val);
      },
      add_dept(){
        this.dialogVisible = true;
        this.dialogType = "add";
      },
      update_dept(){
        this.dialogType = "update";
        this.$post("/dept/getDeptByIdInfo",{id:this.deptparentid},data => {
            this.updateDeptInfo = data;
            this.dialogVisible = true;
          },error => {
            this.$message.error(data);
        });
      },
      del_dept(){
        let ids = [this.deptparentid];
        this.$post("/dept/deleteDept",{ids:ids,status:2},data => {
          this.$message({
             message: '删除成功了',
             type: 'success'
           });
          },error => {
            this.$message.error(error);
        });
      }
	},
  mounted(){
      // this.getList(this.searchForm
  },
  computed:{

  }
}
</script>

<style lang="scss">
@import './organization.scss';
</style>
